// RequestJs.js
// JiraClient.js
// JiraMapping.js
// CustomMapping.js
// SyncTickets.js
// 
class TicketSync
{
    constructor(config)
    {
        try {
            this.syncTickets = new SyncTickets(config);
        } catch (e) {
            console.error('##TicketSync Init fail', e);
            alert('TicketSync Init fail, console can see detail info.');
            throw new Exception('TicketSync Init fail, console can see detail info.');
        }

        this.userList = [];
        this.layout = `
        <li id="sync-tickets-li" style="padding: 5px;">
        <ol>
            <li>
                <label for="team-group">Group</label><select id="team-group">
                    <option value=""> -- </option>
                    <option value="CD">CD</option>
                    <option value="Bug">XA</option>
                    <option value="Task">SJZ</option>
                </select>
            </li>
            <li style="display:none;">
                <label for="task-type">Type:</label><select id="task-type">
                    <option value=""> -- </option>
                    <option value="Code change">Code change</option>
                    <option value="Update information">Update information</option>
                    <option value="Verification">Verification</option>
                    <option value="Update status">Update status</option>
                    <option value="Configuration">Configuration</option>
                    <option value="Export data">Export data</option>
                    <option value="Import data">Import data</option>
                    <option value="Refresh index">Refresh index</option>
                    <option value="Others">Others</option>
                </select>
            </li>
            <li style="display:none;">
                <label for="developer">Developer:</label><input id="developer" class="ui-autocomplete-input" autocomplete="off">
            </li>
            <li style="display:none;">
                <button id="sync-submit">Sync</button>
            </li>
        </ol>
    </li>
`;
    }

    init()
    {
        let self = this;
        jQuery('head').append('<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">');
        jQuery('.aui-header-primary ul.aui-nav').append(self.layout);
        jQuery('#sync-tickets-li ol li').on('click', function() {
            jQuery(this).next().show();
        });
        jQuery('#sync-submit').on('click', function() {
            jQuery('#sync-loading').remove();
            self.sync(jQuery('#key-val').text());
        });

        // add autocomplete
        jQuery('#developer').autocomplete({
            source: self.userList
        });
    }

    validate()
    {
        if (!jQuery('#team-group').val()) {
            alert('Group is required!');
            throw new Exception('Group is required!');
        }

        if (!jQuery('#task-type').val()) {
            alert('Ticket type is required!');
            throw new Exception('Ticket type is required!');
        }

        if (!jQuery('#developer').val()) {
            alert('Developer is required!');
            throw new Exception('Developer is required!');
        }
    }

    async sync(issueKeyOrId)
    {
        let self = this;

        // validat data
        self.validate();

        // start sync
        try {
            jQuery('#sync-loading').remove();
            jQuery('#sync-submit').parent().append('<div id="sync-loading" class="lds-dual-ring"></div>');
            await self.syncTickets.sync(issueKeyOrId);
            jQuery('#sync-loading').remove();
            jQuery('#sync-sc-developer').trigger('click');
        } catch(e) {
            console.error('##Sync Fail!', e);
            alert("Sync Fail! detail please see console.");
        }
    }
}
var ticketSync = new TicketSync(JSON.parse(localStorage.getItem('config')));
// ticketSync.init();